<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8">
<title>Home Budget Lite</title>
<link href="jquery.mobile.theme-1.2.0.min.css" rel="stylesheet" type="text/css"/>
<link href="jquery.mobile.structure-1.2.0.min.css" rel="stylesheet" type="text/css"/>
<link href="HB.css" rel="stylesheet" type="text/css"/>
<script src="jquery-1.8.2.min.js" type="text/javascript"></script>

<script src="jquery.mobile-1.2.0.min.js" type="text/javascript"></script>
<link href="mobiscroll-2.0.3.custom.min.css" rel="stylesheet" type="text/css"/>
<script src="mobiscroll-2.0.3.custom.min.js" type="text/javascript"></script>
</head> 

<body style="background-color:#000;">

<div data-role="page" id="page" data-theme="a" style="color: #00EC00 !important;" data-mini="true" >
    <div data-role="header">
        <h1 style="margin-top: 5px; margin-bottom: 5px;" >Home Budget
            <span id="spMonthYearTitle" style="display: block;font-size: 10px;">Octobar 2012</span>
        </h1>
    </div>
    <ul data-role="listview" style="color: #00EC00 !important;">
        <li id="btnSavings">
            <a  style="display: inline-block; padding: 14px; font-size: 14px;">Saving:</a>
            <span id="spSavingsSum" style="display: inline-block; font-size: 12px;">0.00 RSD</span>
        </li>
        <li id="btnCurrentState">
            <a style="display: inline-block; padding: 14px 14px 0px 14px; font-size: 14px;">Current state:</a>
            <span id="spCurrentState" style="display: inline-block; font-size: 12px;">0.00 RSD</span>
            <span id="spDalySum" style="font-size: 10px; padding-left: 14px; padding-bottom: 14px; display: block;">Daily sum: 0.00 RSD</span>
        </li>
        <li id="btnReserved">
            <a style="display: inline-block; padding: 14px; font-size: 14px;">Reserved Sum:</a>
            <span id="spReservedSum" style="display: inline-block; font-size: 12px;">0.00 RSD</span>
        </li>
        <li id="btnChangeStartEndDate">
            <a style="display: inline-block; padding: 14px 14px 0px 14px; font-size: 14px;">End Date:</a>
            <span id="spEndDate" style="display: inline-block; font-size: 12px;"></span>
            <span id="spDaysLeft" style="font-size: 10px; padding-left: 14px; padding-bottom: 14px; display: block;">Days left: 0s</span>
        </li>
        <li id="btnAccount">
            <a style="display: inline-block; padding: 14px; font-size: 14px;">Accounts:</a>
            <span id="spAccountsSum" style="display: inline-block; font-size: 12px;">0.00 RSD</span>
        </li>

    </ul>

</div>

<div data-role="page" id="CurrentState" data-theme="a" style="color: #00EC00 !important;" data-mini="true" >
    <div data-role="header">
    	<a id="btnCurrentStateCancel" href="#page" data-icon="delete" data-iconpos="notext"></a>
        <h1 >Current State</h1>
    </div>
    <ul data-role="listview" style="color: #00EC00 !important;" data-divider-theme="a">
        <li data-role="list-divider" >
            <span style="display: inline-block; padding: 7px 7px 0 7px; font-size: 14px; width:100px">Current sum:</span>
            <span id="spCurrentSumState" style="display: inline-block; font-size: 12px;">0.00 RSD</span><br />
            <span style="display: inline-block; padding: 0 7px; font-size: 10px; width:100px">Daly sum:</span>
            <span id="spDailySumState" style="display: inline-block; font-size: 10px;">0.00 RSD</span><br />
            <span style="display: inline-block; padding: 0 7px; font-size: 10px; width:100px">Today avalable:</span>
            <span id="spCurrentTodayState" style="display: inline-block; font-size: 10px;">0.00 RSD</span>
            
        </li>
        <li id="btnAddSumView">
            <a style="display: inline-block; padding: 14px; font-size: 14px;">Added today:</a>
            <span id="spAddedToday" style="display: inline-block; font-size: 12px;">0.00 RSD</span>
        </li>
        <li id="btnSpendSum">
            <a style="display: inline-block; padding: 14px; font-size: 14px;">Spend today:</a>
            <span id="spTakenToday" style="display: inline-block; font-size: 12px;">0.00 RSD</span>
        </li>
        <li id="btnSavingSum">
            <a style="display: inline-block; padding: 14px; font-size: 14px;">Saved today:</a>
            <span id="spSavedSumToday" style="display: inline-block; font-size: 12px;">0.00 RSD</span>
        </li>
        <li id="btnReservingSum">
            <a style="display: inline-block; padding: 14px; font-size: 14px;">Reserved today:</a>
            <span id="spReservedSumToday" style="display: inline-block; font-size: 12px;">0.00 RSD</span>
        </li>
        <li id="btnTransferSum">
            <a style="display: inline-block; padding: 14px; font-size: 14px;">Transfer</a>
        </li>

    </ul>
</div>

<div data-role="page" id="page2"  data-theme="a" data-mini="true">
	<div data-role="header">
    	<a id="btnAddCancel" href="#CurrentState" data-icon="delete" data-iconpos="notext"></a>
		<h1>Add Sum</h1>
        <a id="btnAddSum" data-icon="check" data-role="button" data-mini="true" data-theme="a" data-iconpos="notext"></a>
	</div>
	<div data-role="content">	
		<div data-role="fieldcontain">
            <label for="AddSum">Add Sum:</label>
            <input type="text" data-mini="true" name="AddSum" id="txtAddSum" class="auto" style="text-align:right"  />
        </div>	
        <fieldset class="ui-grid-a" style="margin-top:10px;">
            <div class="ui-block-a" style="width:100%">
                <div class="ui-block-a" >
                    <span class="lableName" style="display:block;margin-top:10px;">Accounts:</span>
                </div>
                <div class="ui-block-b" >
                    <a id="btnAccountList" data-role="button" data-mini="true">Account list</a>
                </div>
            </div>
        </fieldset>
        <div data-role="fieldcontain">
            <select id="selAccountAddSum" data-native-menu="false" name="select-choice-0" data-mini="true">
            </select>
        </div>
        <div data-role="fieldcontain">
            <label><input type="checkbox" name="checkbox-0" id="chFromSaving" data-mini="true"/> Take from saving </label>
            <select id="selSavingsAddSum" data-native-menu="false" name="select-choice-0" data-mini="true">
            </select>
        </div>

	</div>	
	
</div>

<div data-role="page" id="page3" data-theme="a" data-mini="true">
	<div data-role="header">
        <a id="btnTakeCancel" href="#CurrentState" data-icon="delete">Cancel</a>
		<h1>Spend Sum</h1>
        <a id="btnTakeSum" data-icon="check" data-role="button" data-mini="true" data-theme="a" >Submit</a>
	</div>
	<div data-role="content">	
		<div data-role="fieldcontain">
            <label for="name">Spend Sum:</label>
            <input type="text" name="name" data-mini="true" class="auto" id="txtTakeSum" class="auto" style="text-align:right" />
        </div>
        <div data-role="fieldcontain">
            <select id="selAccountSpendSum" data-native-menu="false" name="select-choice-0" id="select-choice-0" data-mini="true">
            </select>
        </div>
	</div>

</div>

<div data-role="page" id="pgSaveSum" data-theme="a" data-mini="true">
	<div data-role="header">
        <a id="btnSaveCancel" href="#CurrentState" data-icon="delete">Cancel</a>
		<h1>Save Sum</h1>
        <a href="#CurrentState" id="btnSaveSum" data-icon="check" data-role="button" data-mini="true" data-theme="a" >Submit</a>
	</div>
	<div data-role="content">	
		<div data-role="fieldcontain">
            <select id="selSaveSumSavingList" data-native-menu="false" name="select-choice-0" id="select-choice-0" data-mini="true">
            </select>
        </div>
		<div data-role="fieldcontain">
            <label for="name">Save Sum:</label>
            <input type="text" name="name" data-mini="true" class="auto" id="txtSaveSum" class="auto" style="text-align:right" />
        </div>
        <div data-role="fieldcontain">
            <select id="selSaveSumAccountList" data-native-menu="false" name="select-choice-0" id="select-choice-0" data-mini="true">
            </select>
        </div>
	</div>

</div>

<div data-role="page" id="pgReserveSum" data-theme="a" data-mini="true">
    <div data-role="header">
        <a id="btnReserveCancel" href="#CurrentState" data-icon="delete">Cancel</a>
        <h1>Reserve Sum</h1>
        <a href="#CurrentState" id="btnReserveSum" data-icon="check" data-role="button" data-mini="true" data-theme="a" >Submit</a>
    </div>
    <div data-role="content">
        <div data-role="fieldcontain">
            <select id="selReserveSumList" data-native-menu="false" name="select-choice-0" id="select-choice-0" data-mini="true">
            </select>
        </div>
        <div data-role="fieldcontain">
            <label for="name">Reserve Sum:</label>
            <input type="text" name="name" data-mini="true" class="auto" id="txtReserveSum" class="auto" style="text-align:right" />
        </div>
        <div data-role="fieldcontain">
            <select id="selReserveSumAccountList" data-native-menu="false" name="select-choice-0" id="select-choice-0" data-mini="true">
            </select>
        </div>
    </div>

</div>

<div data-role="page" id="pgTransferSum" data-theme="a" data-mini="true">
    <div data-role="header">
        <a id="btnTransferCancel" href="#CurrentState" data-icon="delete">Cancel</a>
        <h1>Reserve Sum</h1>
        <a href="#CurrentState" id="btnTranseSum" data-icon="check" data-role="button" data-mini="true" data-theme="a" >Submit</a>
    </div>
    <div data-role="content">
        <div data-role="fieldcontain">
        	<label for="name">From account:</label>
            <select id="selAccountListFrom" data-native-menu="false" name="select-choice-0" id="select-choice-0" data-mini="true">
            </select>
        </div>
        <div data-role="fieldcontain">
            <label for="name">Transfer Sum:</label>
            <input type="text" name="name" data-mini="true" class="auto" id="txtTransferSum" class="auto" style="text-align:right" />
        </div>
        <div data-role="fieldcontain">
        	<label for="name">To account:</label>
            <select id="selAccountListTo" data-native-menu="false" name="select-choice-0" id="select-choice-0" data-mini="true">
            </select>
        </div>
    </div>

</div>

<div data-role="page" id="page4" data-theme="a" data-mini="true">
	<div data-role="header">
        <a id="btnChangeDateCancel" href="#page" data-icon="delete">Cancel</a>
		<h1>Change Dates</h1>
        <a href="#page" id="btnChangeDate" data-icon="check" data-role="button" data-mini="true" data-theme="a" >Submit</a>
	</div>
	<div data-role="content">	
        <div data-role="fieldcontain">
            <label for="name" style="float: left;margin-top: 10px;" >Start Day:</label>
            <input type="text" data-mini="true" style="text-align:right;" name="name" id="txtStartDayChange"  />
            <label for="name" style="float: left;margin-top: 10px;" >End Day:</label>
            <input type="text" data-mini="true" style="text-align:right;" name="name" id="txtEndDayChange"  />
        </div>		
	</div>
</div>

<div data-role="page" id="page6" data-theme="a" data-mini="true">
	<div data-role="header">
        <a id="btnAccountListCancel" href="#page" data-icon="delete">Cancel</a>
		<h1>Accounts</h1>
        <a href="#page7" id="btnAddAccount" data-icon="check" data-role="button" data-mini="true" data-theme="a" >Add</a>
	</div>
	<div data-role="content">	
        <ul id="lvAccountList" autodividers="true" data-role="listview" data-theme="a" data-split-theme="d" data-mini="true" data-split-icon="gear"></ul>
	</div>
</div>

<div data-role="page" id="page7" data-theme="a" data-mini="true">
	<div data-role="header">
        <a id="btnAccountCancel" href="#page6" data-icon="delete">Cancel</a>
		<h1>Add/Edit Account</h1>
        <a id="btnAccountSubmit" data-icon="check" data-role="button" data-mini="true" data-theme="a" >Submit</a>
	</div>
	<div data-role="content">	
        <div data-role="fieldcontain">
            <label for="AccountName">Account name:</label>
            <input type="text" data-mini="true" name="AccountName" id="txtAccountName"  />
            <a id="btnDeleteAccount" data-role="button" data-mini="true" data-theme="a">Delete account</a>
        </div>
	</div>
</div>

<div data-role="page" id="page8" data-theme="a" data-mini="true">
    <div data-role="header">
        <a id="btnSavingsListCancel" href="#page" data-icon="delete">Cancel</a>
        <h1>Savings</h1>
        <a href="#page9" id="btnAddSavings" data-icon="check" data-role="button" data-mini="true" data-theme="a" >Add</a>
    </div>
    <div data-role="content">
        <ul id="lvSavingsList" autodividers="true" data-role="listview" data-theme="a" data-split-theme="d" data-mini="true" data-split-icon="gear"></ul>
    </div>
</div>

<div data-role="page" id="page9" data-theme="a" data-mini="true">
    <div data-role="header">
        <a id="btnSavingCancel" href="#page8" data-icon="delete">Cancel</a>
        <h1>Add/Edit Saving</h1>
        <a id="btnSavingSubmit" data-icon="check" data-role="button" data-mini="true" data-theme="a" >Submit</a>
    </div>
    <div data-role="content">
        <div data-role="fieldcontain">
            <label for="SavingName">Saving name:</label>
            <input type="text" data-mini="true" name="SavingtName" id="txtSavingName"  />
            <a id="btnDeleteSaving" data-role="button" data-mini="true" data-theme="a">Delete saving</a>
        </div>
    </div>
</div>

<div data-role="page" id="page10" data-theme="a" data-mini="true">
    <div data-role="header">
        <a id="btnReservedListCancel" href="#page" data-icon="delete">Cancel</a>
        <h1>Reserved</h1>
        <a href="#page11" id="btnAddReserve" data-icon="check" data-role="button" data-mini="true" data-theme="a" >Add</a>
    </div>
    <div data-role="content">
        <ul id="lvReservedList" autodividers="true" data-role="listview" data-theme="a" data-split-theme="d" data-mini="true" data-split-icon="gear"></ul>
    </div>
</div>

<div data-role="page" id="page11" data-theme="a" data-mini="true">
    <div data-role="header">
        <a id="btnReserveCancel" href="#page10" data-icon="delete">Cancel</a>
        <h1>Add/Edit Reserved</h1>
        <a id="btnReserveSubmit" data-icon="check" data-role="button" data-mini="true" data-theme="a" >Submit</a>
    </div>
    <div data-role="content">
        <div data-role="fieldcontain">
            <label for="ReservedName">Reserve name:</label>
            <input type="text" data-mini="true" name="ReservedName" id="txtReservedName"  />
            <a id="btnDeleteReserve" data-role="button" data-mini="true" data-theme="a">Delete reserve</a>
        </div>
    </div>
</div>


<script src="autoNumeric-1.7.5.js" type="text/javascript"></script>
<script src="HDDataHelper.js" type="text/javascript"></script>
<script src="HDData.js" type="text/javascript"></script>
<script src="HDMain.js" type="text/javascript"></script>
<script src="HDAccounts.js" type="text/javascript"></script>
<script src="HDChangeDate.js" type="text/javascript"></script>
<script src="HDSavings.js" type="text/javascript"></script>
<script src="HDReserved.js" type="text/javascript"></script>
<script src="HDCurrentState.js" type="text/javascript"></script>
<script src="HDAdd.js" type="text/javascript"></script>
<script src="HDTake.js" type="text/javascript"></script>
<script src="HDSaveSum.js" type="text/javascript"></script>
<script src="HDReservSum.js" type="text/javascript"></script>
<script src="HDTransferSum.js" type="text/javascript"></script>
<script type="text/javascript">
	jQuery(function($) {
    	$('input.auto').autoNumeric({aSep: ',', aDec: '.'});
		$('input.int').autoNumeric({aSep: ',', aDec: '.',mDec:0, aPad: false });
		hdmain.updateData();
  	});
</script>
</body>
</html>